<html>
  <head>
    <script type="module" src="index.js"></script>
    <style>
      body {
        font-family: Arial, sans-serif;
      }

      #peers div { padding: 8px; font-size: 18px; }
      #messages div { padding: 8px; font-size: 18px; }
    </style>
  </head>
  <body style="display: flex; flex-direction: column;">
    <h3 style="padding-top: 8px; margin: 0;">
      P2PCF example
    </h3>
    <h6 style="padding-top: 8px; padding-bottom: 24px; margin: 0;">
      Share this URL to connect via P2PCF + WebRTC
    </h6>

    <div style="display: flex; flex-direction: row;">
      <div style="display: flex; flex-direction: column; min-width: 200px;">
        Peers:
        <div id="peers" style="display: flex; flex-direction: column;">
        </div>
      </div>
      <div style="display: flex; flex-direction: column;">
        Messages:
        <div id="messages" style="display: flex; flex-direction: column;">
        </div>
      </div>
    </div>
    <div id="videos" style="display: flex; flex-direction: row;">
    </div>
    <div style="padding-top: 24px; display: flex; flex-direction: row;">
      <div style="padding-right: 4px; "id="session-id"></div>
      <form onsubmit="return false;">
        <input id="send-box" type="text"/>
        <button type="submit" id="send-button">Send</button>
      </form>
    </div>
    <button style="width: 100px;" type="submit" id="video-button">Enable Video</button>
  </body>
</html>
